<template>
  <div class="user-info-page">
    <div class="portal-main">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="avatar">
            <el-avatar :size="160" icon="el-icon-user-solid"></el-avatar>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="user-info">
            <h2>{{ $store.state.username }}</h2>
            <p>tip</p>
            <!-- <a href="#">修改个人信息 ></a> -->
          </div>
        </el-col>
        <el-col :span="9">
          <div class="user-actions">
            <ul class="actions-list">
              <li>账户安全: <span>较高</span></li>
              <li>
                绑定手机: <span>{{ $store.state.userphone }}</span>
              </li>
              <li>
                绑定邮箱: <span>{{ $store.state.useremail }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <div class="portal-sub">
      <el-row>
        <el-col :span="12">
          <div class="info-list">
            <i class="el-icon-goods"></i>
            <div class="info-list-text">
              <h3>
                待支付的订单:
                <span>{{ getPayingOrderListLength }}</span>
              </h3>
              <router-link
                to="/user/orderList"
                @click.native="changeOrderListActiveName('second')"
                >查看待支付订单 ></router-link
              >
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-list">
            <i class="el-icon-box"></i>
            <div class="info-list-text">
              <h3>
                待收货的订单: <span>{{ getPaidOrderListLength }}</span>
              </h3>
              <router-link
                to="/user/orderList"
                @click.native="changeOrderListActiveName('third')"
                >查看待收货订单 ></router-link
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="info-list">
            <i class="el-icon-chat-line-round"></i>
            <div class="info-list-text">
              <h3>待评价商品数: <span>0</span></h3>
              <router-link to="/user/comment">查看待评价商品 ></router-link>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-list">
            <i class="el-icon-star-off"></i>
            <div class="info-list-text">
              <h3>
                喜欢的商品: <span>{{ $store.state.favoriteItemsCount }}</span>
              </h3>
              <router-link to="/user/favorite">查看喜欢的商品 ></router-link>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfoPage",
  methods: {
    changeOrderListActiveName(newActiveName) {
      this.$store.commit("changeOrderListActiveName", newActiveName);
    },
  },
  computed: {
    getPayingOrderListLength() {
      const payingOrderListLength = this.$store.state.userOrderList.filter(
        (n) => {
          if (n.status == "待支付") {
            return n;
          }
        }
      );
      return payingOrderListLength.length;
    },
    getPaidOrderListLength() {
      const paidOrderListLength = this.$store.state.userOrderList.filter(
        (n) => {
          if (n.status == "待收货") {
            return n;
          }
        }
      );
      return paidOrderListLength.length;
    },
  },
};
</script>

<style scoped>
.user-info-page {
  padding: 30px 40px;
}
.portal-main {
  margin: 40px 0;
}
.avatar {
  display: flex;
  justify-content: center;
  /* 高度由上面el-avatar组件的:size="160"决定 */
}
.user-info {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-info h2 {
  font-size: 24px;
  font-weight: 400;
  color: #616161;
}
.user-info p {
  color: #b0b0b0;
  margin-top: 5px;
}
.user-info a {
  font-size: 12px;
  color: #ff6700;
  margin-top: 10px;
}
.user-actions {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.actions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #757575;
}
.actions-list li {
  padding: 6px 0;
  font-size: 14px;
}

.portal-sub {
  margin: 40px 0;
}
.info-list {
  height: 150px;
  display: flex;
  align-items: center;
}
.info-list i {
  font-size: 100px;
  margin-left: 20px;
}
.info-list-text {
  margin-left: 10px;
}
.info-list-text h3 {
  font-size: 18px;
  margin: 5px;
}
.info-list-text h3 > span {
  color: #ff6700;
}
.info-list-text a {
  font-size: 14px;
  margin: 5px;
}
.info-list-text a:hover {
  color: #ff6700;
}
</style>